<template>
  <Card :title="t('routes.dashboard.workbench.quickNav.title')">
    <template v-for="item in navItems">
      <CardGrid
        v-if="hasPermission(item.auth)"
        :key="item.title"
        class="!md:w-1/7 !w-full"
        style="cursor: pointer"
        @click="() => go(item.path)"
      >
        <span class="flex flex-col items-center">
          <Icon :icon="item.icon" :color="item.color" size="20" />
          <span class="text-md mt-2 truncate">{{ item.title }}</span>
        </span>
      </CardGrid>
    </template>
  </Card>
</template>
<script lang="ts" setup>
  import { Card, CardGrid } from 'ant-design-vue';

  import { useI18n } from '@/hooks/web/useI18n';
  import { usePermission } from '@/hooks/web/usePermission';
  import { useGo } from '@/hooks/web/usePage';

  import { navItems } from './data';
  import Icon from '@/components/Icon/Icon.vue';

  const { t } = useI18n();
  const { hasPermission } = usePermission();
  const go = useGo();
</script>
